<template>
    <div class="pageWrap pos-r">
        <el-card style="margin-bottom: 20px">
            <template v-if="$store.state.loginParams.source === '5'">
                <span class="companyCode">代理商</span>
                <el-select
                    size="small"
                    style="width: 180px"
                    filterable
                    v-model="agentId"
                    @change="
                        shopList = []
                        currentPage = 1
                        getCompanyList()
                        companyCode = ''
                    "
                >
                    <el-option label="全部" value=""></el-option>
                    <el-option
                        v-for="(item, index) in agentList"
                        :label="item.agentName"
                        :value="item.id"
                        :key="index"
                    ></el-option>
                </el-select>
            </template>
            <template
                v-if="
                    $store.state.loginParams.source === '3' ||
                    $store.state.loginParams.source === '5'
                "
            >
                <span class="companyCode">商家</span>
                <el-select
                    size="small"
                    style="width: 180px"
                    filterable
                    v-model="companyCode"
                    @change="
                        shopList = []
                        currentPage = 1
                        getList()
                    "
                >
                    <el-option
                        v-for="(item, index) in companyList"
                        :label="item.companyName"
                        :value="item.companyCode"
                        :key="index"
                    ></el-option>
                </el-select>
            </template>
        </el-card>
        <ul class="wrap">
            <div class="empty" v-if="shopList.length === 0">
                <div>
                    <el-image src="static/pic/empty.png"></el-image>
                    <div>暂无数据</div>
                </div>
            </div>
            <li
                @click="currIndex = index"
                v-for="(item, index) in shopList"
                :key="index"
                class="el-card is-always-shadow li"
            >
                <div class="imageWrap">
                    <el-image
                        v-show="currIndex == index"
                        class="checkImg"
                        src="static/pic/check.png"
                        style="height: 30px"
                    ></el-image>
                    <el-image
                        v-show="currIndex !== index"
                        class="checkImg"
                        src="static/pic/noCheck.png"
                        style="height: 30px"
                    ></el-image>
                    <el-image
                        :src="$netUrl(item.pictureUrl, 1)"
                        style="height: 200px"
                    ></el-image>
                </div>
                <div class="right_content">
                    <div style="flex: 1">
                        <div class="r_head_top">
                            <div class="t1">{{ item.schemeName }}</div>
                            <div class="t1">
                                销售价：<span class="red">
                                    ￥{{ precision(item.price) }}/{{
                                        item.gainDays
                                    }}天</span
                                >
                            </div>
                            <div class="tip mb20">
                                {{ item.addServiceNames }}
                            </div>
                            <div class="remake">{{ item.description }}</div>
                        </div>
                    </div>
                    <div class="btns">
                        <el-button
                            class="btnWidth commonBtn1"
                            type="danger"
                            @click="showValue=true;currRow=item"
                            v-if="$store.state.loginParams.source === '5'"
                            >方案详情</el-button
                        >
                        <template v-else>
                            <el-button
                                v-show="item.status === 1"
                                type="danger"
                                class="btnWidth commonBtn1"
                                @click="buy(item)"
                                >购买</el-button
                            >
                            <el-button
                                v-show="item.status === 1 && item.isTrial"
                                type="danger"
                                class="btnWidth commonBtn2"
                                @click="onTrial(item)"
                                >试用{{ item.trialDays }}天</el-button
                            >
                            <el-button
                                type="danger"
                                class="btnWidth commonBtn3"
                                @click="setMoney(item)"
                                >销售价设置</el-button
                            >
                            <el-button
                                v-if="item.status === 1"
                                type="danger"
                                class="btnWidth commonBtn4"
                                @click="upStatus(item, 0)"
                                >下架</el-button
                            >
                            <el-button
                                v-else
                                type="danger"
                                class="btnWidth commonBtn5"
                                @click="upStatus(item, 1)"
                                >上架</el-button
                            >
                        </template>
                    </div>
                </div>
            </li>
        </ul>
        <div
            v-if="shopList.length > 0"
            style="width: 100%; padding: 15px"
            class="bottomWrap el-card is-always-shadow column right"
        >
            <el-pagination
                background
                :current-page.sync="currentPage"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                layout="prev, pager, next"
                :total="totalNum"
            ></el-pagination>
        </div>
        <setMoney
            :value.sync="showSetMoney"
            :currRow="currRow"
            @getList="getList"
        ></setMoney>
        <seeData
            :value.sync="showValue"
            :currRow="currRow"
        ></seeData>
        <buyShop
            :companyCode="companyCode"
            :companyName="companyName"
            :value.sync="showBuyShop"
            :currRow="currRow"
            @getList="getList"
        ></buyShop>
    </div>
</template>
<script >
import setMoney from './components/setMoney'
import buyShop from './components/buyShop'
import seeData from '../orderHistory/components/seeData.vue'
export default {
    components: {
        setMoney,
        buyShop,
        seeData
    },
    data: function () {
        return {
            pageSize: 10,
            currentPage: 1,
            totalNum: 0,
            agentId: '',
            currIndex: 0,
            companyName: '',
            companyCode: '',
            currRow: {},
            showValue: false,
            showSetMoney: false,
            showBuyShop: false,
            form: {},
            agentList: [],
            companyList: [],
            shopList: [
            ]
        }
    },
    computed: {
        loginParams () {
            return this.$store.state.loginParams
        }
    },
    watch: {
        companyCode (val) {
            console.log(val)
            this.companyName = ''
            this.companyList.forEach(item => {
                if (item.companyCode === val) {
                    this.companyName = item.companyName
                }
            })
        }
    },
    created () {
        this.getAgentList()
        this.getCompanyList()
        console.log(this.loginParams, 'loginParams')
    },
    methods: {
        handleCurrentChange (page) {
            // 换页
            this.currentPage = page
            this.getList()
        },
        async onTrial (item) {
            this.$confirm(`确定为商家:（${this.companyName}）开启试用吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await this.$axios.post(this.$store.state.ip + '/server/agent/serverinfo/trial', {
                    data: {
                        schemeID: item.schemeID,
                        companyCode: this.companyCode
                    }
                })
                let response = res.data
                console.log(response)
                if (response.ret === '0') {
                    this.$message({
                        message: '开启成功',
                        type: 'success'
                    })
                    this.getList()
                }
            })
        },
        buy (item) {
            this.$confirm(`确定为商家:${this.companyName}购买吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                this.currRow = item
                this.showBuyShop = true
            })
        },
        setMoney (row) {
            this.currRow = row
            this.showSetMoney = true
        },
        upStatus (row, status) {
            this.$confirm(`确定${status === 1 ? '上架' : '下架'}吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await this.$axios.post(this.$store.state.ip + '/server/agent/serverinfo/rules/updateStatus', {
                    data: {
                        ruleId: row.ruleID,
                        status: status
                    }
                })
                let response = res.data
                if (response.ret === '0') {
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    })
                    this.getList()
                }
            })
        },
        async getAgentList () {
            let res = await this.$axios.post(this.$store.state.ip + '/server/agent/serverinfo/agentList', {
                data: {
                    agentId: this.$store.state.loginParams.agentId
                }
            })
            let response = res.data
            if (response.ret === '0') {
                this.agentList = response.data
            }
        },
        async getCompanyList () {
            let res = await this.$axios.post(this.$store.state.ip + '/server/agent/serverinfo/companyList', {
                data: {
                    agentId: this.$store.state.loginParams.agentId,
                    selectId: this.agentId
                }
            })
            let response = res.data
            if (response.ret === '0') {
                this.companyList = response.data
                if (this.companyList.length > 0) {
                    this.companyCode = this.companyList[0].companyCode
                    this.getList()
                }
            }
        },
        async getList () {
            let res = await this.$axios.post(this.$store.state.ip + '/server/agent/serverinfo/rules', {
                data: {
                    agentId: this.$store.state.loginParams.agentId,
                    agentSelect: this.agentId,
                    roleId: this.$store.state.loginParams.roleId,
                    companyCode: this.companyCode,
                    size: 10,
                    page: this.currentPage - 1
                }
            })
            let response = res.data
            if (response.ret === '0') {
                this.shopList = response.data.list
                this.totalNum = response.data.total
            }
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.mb20
    margin-bottom: 20px

.checkImg
    position: absolute
    top: 10px
    right: 10px
    z-index: 5

.commonBtn1
    border-radius: 9px
    width: 130px
    height: 50px
    background-image: linear-gradient(to right, #ff7350, #fe9c7a)
    border: none
    font-size: 15px

.commonBtn1:hover
    background-image: linear-gradient(to right, #ea360a, #fe9c7a)

.commonBtn2
    border-radius: 9px
    width: 130px
    height: 50px
    background-image: linear-gradient(to right, #3ec0da, #3ec0da)
    border: none
    font-size: 15px

.commonBtn2:hover
    background-image: linear-gradient(to right, #098ea8, #3ec0da)

.commonBtn3
    border-radius: 9px
    width: 130px
    height: 50px
    background-image: linear-gradient(to right, #64a1f5, #71b0ff)
    border: none
    font-size: 15px

.commonBtn3:hover
    background-image: linear-gradient(to right, #2d76db, #71b0ff)

.commonBtn4:hover
    background-image: linear-gradient(to right, #686b6e, #a9b2be)

.commonBtn5:hover
    background-image: linear-gradient(to right, #31c06f, #73d09a)

.commonBtn4
    border-radius: 9px
    width: 130px
    height: 50px
    background-image: linear-gradient(to right, #a9b2be, #bbc4d0)
    border: none
    font-size: 15px

.commonBtn5
    border-radius: 9px
    width: 130px
    height: 50px
    background-image: linear-gradient(to right, #64c88f, #73d09a)
    border: none
    font-size: 15px

.pageWrap
    padding-top: 15px
    background: #eef3fa
    height: 100%
    overflow: auto
    position: relative
    width: 100%

.wrap
    position: absolute
    right: 0
    left: 0
    bottom: 65px
    top: 105px
    overflow: auto

.wrap li
    margin-bottom: 10px
    padding: 10px
    display: flex
    font-size: 14px

.bottomWrap
    bottom: 0
    position: absolute

.empty
    text-align: center
    margin: 100px auto
    color: #9a9494

.red
    color: #e01212 !important
    font-weight: bold

.imageWrap
    width: 230px
    height: 200px
    margin-right: 10px
    padding: 10px
    position: relative

.right_content
    flex: 1
    display: flex
    position: relative
    padding: 20px 0

.r_head_bottom1
    position: absolute
    width: 100%
    bottom: 0

.r_head_top
    margin-bottom: 20px

.t1
    font-size: 20px
    font-weight: bold
    margin-bottom: 20px
    color: #333333

.title
    flex: 1
    width: 0
    // overflow: hidden；

.r_head_top > *
    display: flex
    flex-wrap: wrap

.remake
    margin-bottom: 20px

.btns
    width: 250px
    padding-top: 40px
    display: flex
    flex-wrap: wrap

.flex
    display: flex
    justify-content: space-between
    align-items: center

.time
    color: red

.btnWidth
    width: 110px
    margin-left: 0 !important
    margin-right: 10px

.mb10
    margin-bottom: 10px

.companyCode
    font-weight: bold
    margin-right: 10px
</style>
